import React, {useEffect, useState} from 'react';
import {
    Button,
    Dimensions,
    FlatList,
    Image,
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text, TextInput, ToastAndroid,
    TouchableOpacity,
    View,
} from 'react-native';

import {useNavigation} from "@react-navigation/native";
import {DOMAIN_URL, newsDelete, newsDetail, userRead, userUnread} from "../../../util/api";
import UserIconList from "../../compenent/UserIconList";
import {PAGENAME} from "../../../util/PageName";

const {width, height} = Dimensions.get('screen');

const BranchDetailScreen = (props: { navigation: any }) => {
    const [selectedId, setSelectedId] = useState(null);
    const [item, setNews] = useState({});
    const [newsReadUsers, setNewsReadUsers] = useState({});
    const [newsUnReadUsers, setNewsUnReadUsers] = useState({});
    const [image, setImage] = useState({});
    const navigation = useNavigation();
    if (props && props.route && props.route.params) {
        const newsId = props.route.params.newsId;
        useEffect(() => {
            const unsubscribe = navigation.addListener(
                'focus',
                payload => {
                    getNewsById(newsId);
                    getNewsUserRead(newsId);
                    getNewsUserUnRead(newsId);
                }
            );
            return () => {
                unsubscribe();
            };
        }, [navigation]);
    }

    const getNewsById = (newsId) => {
        newsDetail(newsId).then((res) => {
            if (res.data.attachmentsDetail) {
                console.log(res.data.attachmentsDetail[0])
                setImage(res.data.attachmentsDetail[0])
            }

            setNews(res.data)
        })
    }

    const getNewsUserRead = (newsId) => {
        userRead(newsId).then((res) => {
            setNewsReadUsers(res.rows);
        })
    }

    const getNewsUserUnRead = (newsId) => {
        userUnread(newsId).then((res) => {
            setNewsUnReadUsers(res.rows);
        })
    }

    const deleteNews = (newsId) => {
        newsDelete(newsId).then((res) => {
            ToastAndroid.show('删除成功', 2000);
        }).catch((err) => {
            ToastAndroid.show('删除失败', 2000);
        }).finally(() => {
            props.navigation.goBack();
        });
    }

    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <Text style={styles.label}>标题</Text>
                <TextInput editable={false} style={styles.input} value={item.newsTitle}/>

                <Text style={styles.label}>描述内容</Text>
                <TextInput
                    editable={false}
                    style={[styles.input]}
                    value={item.newscontent}
                    multiline
                />
                <View key={'img'} style={{alignItems: 'center', marginTop: 10}}>
                    <Image
                        style={{width: '95%', height: 150}}
                        source={{
                            uri: `${DOMAIN_URL}/${image.path}`,
                        }}
                    />
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',marginTop: 10, marginBottom: 10}}>
                    <TouchableOpacity onPress={() => {
                        props.navigation.push(PAGENAME.BRANCH_UPDATE, {newsId: item.newsid})
                    }}>
                        <Image source={require('../../../assets/images/icon/edit.png')} style={{
                            width: 20, // 图标宽度
                            height: 20, // 图标高度
                        }}/>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {
                        deleteNews(item.newsid)
                    }}>
                        <Image source={require('../../../assets/images/icon/delete.png')} style={{
                            width: 20, // 图标宽度
                            height: 20, // 图标高度
                            marginLeft: 15,
                            marginRight: 10
                        }}/>
                    </TouchableOpacity>
                </View>

            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // marginTop: StatusBar.currentHeight || 0,
        marginHorizontal: 8,
        marginTop: 8,
    },
    label: {
        fontSize: 16,
        marginTop: 10,

    },
    input: {
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 5,
        marginBottom: 10,
        padding: 10,
    },
    // item: {
    //   padding: 20,
    //   marginVertical: 8,
    //   marginHorizontal: 16,
    // },
    title: {
        fontSize: 32,
    },
    indexDataRow: {
        marginBottom: 4,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
});

export default BranchDetailScreen;
